/**
 * 头图
 */
define('pc/js/mod/write/CoverImageCanvas', [
    'utils/ImageClip',
    'utils/FileUpload',
    'utils/helpers'], function(ImageClip, FileUpload, helpers){

function CoverImage(id) {
    this.doc = document;
    this.wrapper = this.doc.getElementById(id);

    this.minWidth = 300;
    this.minHeight = 400;
    this.fileUpload = null;
    this.preview = null;
    this.deleteBtn = null;
    this.jp = null;

    this.base64 = '';
    this.html =
'<div class="writing-cover-select">' +
    '<input id="writing-cover-image" type="file" class="writing-cover-select-file">' +
    '<span class="writing-cover-select-icon"></span>' +
    '<h4 class="">添加封面图片</h4>' +
    '<p>支持 >= '+ this.minWidth +' * '+ this.minHeight +' 且 1MB 内的 JPG／JPEG／PNG 格式的图片</p>' +
'</div>' +
'<div class="writing-cover-preview" style="display: none"><span class="writing-cover-preview-delete">删除</span></div>';

    this.render();
    this.bindEvent();
}

CoverImage.prototype = {
    constructor: CoverImage,

    render: function() {
        this.wrapper.innerHTML = this.html;

        this.fileUpload = new FileUpload({
            id: 'writing-cover-image',
            fileSizeLimit: 1024 * 1024,
            accept: 'image/jpg, image/jpeg, image/png'
        });
        this.preview = this.wrapper.querySelector('.writing-cover-preview');
        this.deleteBtn = this.wrapper.querySelector('.writing-cover-preview-delete');
    },

    checkDimensions: function(file, callback) {
        var _self = this;
        var img = new Image();
        var r = new FileReader();

        img.onload = (e) => {
            if(img.width < _self.minWidth || img.height < _self.minHeight) {
                XUI.dialog.alert('图片尺寸太小，至少为 ' + _self.minWidth + ' * ' + _self.minHeight);

            } else {
                callback(r.result);
            }

            img.onload = null;
            img = null;
            r.onload = null;
            r = null;
        };

        r.onload = (e) => {
            img.src = r.result;
        };
        r.readAsDataURL(file.nativeFile);
    },

    bindEvent: function() {
        var _self = this;

        this.fileUpload.fileQueuedHandler = (file) => {
            _self.checkDimensions(file, (res) => {
                XUI.dialog.showWithBtn(
                    '<div id="clipcanvas" style="height:400px"></div>',
                    '图片裁剪',
                    XUI.BTN_OK | XUI.BTN_CANCEL, {
                        dialogWidth: 500,
                        cancelButtonText: '重新选择'
                    },
                    (flag) => {
                        if(1 === flag) {
                            _self.clipEnd();
                        }
                    });

                _self.imageClip = new ImageClip({
                    maskStyle: 'rgba(0, 0, 0, .8)',
                    canvasWidth: 500,
                    canvasHeight: 400,
                    clipWidth: _self.minWidth,
                    clipHeight: _self.minHeight
                });
                _self.imageClip.render(_self.doc.getElementById('clipcanvas'), res);
            });
        };

        this.deleteBtn.onclick = () => {
            _self.delPreview();
        };
    },

    clipEnd: function() {
        this.base64 = this.imageClip.getPreview('image/jpeg', 0.7);

        this.renderPreview();
    },
    renderPreview: function() {
        var isBase64 = this.base64.indexOf('data:') >= 0;

        if(isBase64) {
            this.preview.style.backgroundImage = 'url('+ this.base64 +')';
        } else {
            this.preview.style.backgroundImage = 'url('+ helpers.uploadPath(this.base64) +')';
        }

        this.preview.style.display = 'block';
    },
    delPreview: function() {
        this.base64 = '';
        this.preview.style.display = 'none';
        this.preview.backgroundImage = 'none';
    },
    getBase64: function() {
        return this.base64;
    },
    setValue: function(url) {
        this.base64 = url;
        this.renderPreview();
    }
}

return {
    init: function(id) {
        return new CoverImage(id);
    }
};
});
